<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自动生成V字形排列</title>
  <style type="text/css">
    *{margin: 0;padding: 0;}
    body{background: #000}
    #box{width: 300px;height: 200px;background: #fff;margin: 200px auto;position: relative;}
    #In{position: absolute;left: 10px;top: 10px;}
    div{width: 50px;height: 50px;background: #ff0000;position: absolute;left: 0;top: 0;color: #fff;font-size: 32px;line-height: 50px;text-align: center;}
  </style>
  <script type="text/javascript">
   window.onload = function(){
      var In = document.getElementById('In');
      var box = document.getElementById('box');
      var Div = box.getElementsByTagName('div');
        In.onclick = function (){
          for (var i = 0; i < 5; i++) {
            box.innerHTML += "<div>" + i + "</div>";
          };
          for (var i = 0; i < Div.length; i++) {
            if (i < (Div.length + 1) / 2) {
              Div[i].style.left = 10 + 50 * i + "px";
              Div[i].style.top = 40 + 50 * i + "px";
            } else{
              Div[i].style.left = 10 + 50 * i + "px";
              Div[i].style.top = 40 + 50 * (Div.length - i - 1) + "px";
            };
            
          };
        }


   }
  </script>
</head>
<body>
  <div id="box">
    <input id="In" type="button" value="自动生成一个V形">
  </div>
  
</body>
</html>